<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="单据规则配置" name="first">
        <DocConfig :show.sync="showDocCinfig"></DocConfig>
      </el-tab-pane>
      <el-tab-pane label="车辆ID规则配置" name="second">
        <VehicleIdGenPage :show.sync="showVehicleIdGenPage"></VehicleIdGenPage>
      </el-tab-pane>
      <el-tab-pane label="配件与供应商关联配置" name="third">
        <AccessorySupplierRelevance :show.sync="showAccessorySupplierRevelance"></AccessorySupplierRelevance>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import DocConfig from '@/views/basicData/ruleSetting/components/DocConfig.vue'
import VehicleIdGenPage from '@/views/basicData/ruleSetting/components/VehicleIdGenPage.vue'
import AccessorySupplierRelevance from '@/views/basicData/ruleSetting/components/AccessorySupplierRelevance.vue'
import {throttle} from '@/utils/index.js'

export default {
  name: 'RuleSetting',
  components: {
    DocConfig,
    VehicleIdGenPage,
    AccessorySupplierRelevance
  },
  data(){
    return {
      activeName: 'first',
      showDocCinfig: true,
      showVehicleIdGenPage: false,
      showAccessorySupplierRevelance: false,
      tabClick: throttle(this.handleClick, 500)
    }
  },
  methods: {
    handleClick(tab, event) {
      if(tab.paneName === 'first') {
        this.showDocCinfig = true
        this.showVehicleIdGenPage = false
        this.showAccessorySupplierRevelance = false
      } else if(tab.paneName === 'second') {
        this.showDocCinfig = false
        this.showVehicleIdGenPage = true
        this.showAccessorySupplierRevelance = false
      } else if(tab.paneName === 'third') {
        this.showDocCinfig = false
        this.showVehicleIdGenPage = false
        this.showAccessorySupplierRevelance = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding-top: 0;
}
::v-deep {
  .el-tabs__nav-scroll{
    display: flex;
    justify-content: center;
  }
}
</style>